import React, { useState } from 'react'

// 自己封装一个hook
const useInputVal = () => {
  // value是最终的数据
  // setVal是修改数据的方法
  // 函数内部可以调用其他的 Hook,比如useState
  const [value, setVal] = useState('');
  // 这里返回的是对象，所以在调用函数后，也要通过对象接收数据
  return {
    value: value,
    onChange: (e) => setVal(e.target.value)
  }
}
export default function LoginFn() {
  // 设置用户名密码
  // const [username, setUsername] = useState('admin');
  // const [pass, setPass] = useState('123456');
  // return (
  //   <div>
  //     <h1>欢迎登陆</h1>
  //     <input type="text" value={username}
  //     onChange={(e) => setUsername(e.target.value)} placeholder="用户名"></input>
  //     <input type="password" value={pass}
  //     onChange={(e) => setPass(e.target.value)}  placeholder="密码"></input>
  //     <button onClick={()=>{console.log(username, pass)}}>登陆</button>
  //   </div>
  // )
  // ======= 自定义的hook ==========
  // 设置用户名密码
  const {reset:resetName, ...name} = useInputVal()
  // useInputVal返回一个对象，所以用{}
  const {reset:resetPass, ...pass} = useInputVal()
  return (
    <div>
      <h1>欢迎登陆</h1>
      <input type="text" placeholder="用户名" {...name}></input>
      <input type="password" placeholder="密码" {...pass}></input>
      <button onClick={() => { console.log(name.value, pass.value) }}>登陆</button>
    </div>
  )
}
